<template>
	<page-router-view name="CategoryType">
		<md-advanced-table :data="table.rows" v-bind="tableAttrs" :pager-config="{currentPage: query.page, total: table.count, pageSize: query.size}" @page-change="onPageChange">
			<template #buttons>
				<v-row>
					<v-col :sm="3" class="pt-4">
						<v-text-field v-model="query.name" label="名称" outlined clearable dense hint="请输入名称模糊搜索"/>
					</v-col>
					<v-col sm="3" class="pt-5">
						<v-btn class="mr-1" @click="onSearch">搜索</v-btn>
						<v-btn color="primary" @click="$refs.dialog.add()">新增</v-btn>
					</v-col>
				</v-row>
			</template>
			<template #icon="{row}">
				<v-avatar>
					<img :src="row.icon | imageSrc"/>
				</v-avatar>
			</template>
			<template #color="{row}">
				<span :style="{color: row.color}">{{ row.color }}</span>
			</template>
			<template #backgroundColor="{row}">
				<span :style="{backgroundColor: row.backgroundColor}">{{ row.backgroundColor }}</span>
			</template>
			<template #action="{row}">
				<v-btn color="primary" class="mr-1" @click="edit(row)">编辑</v-btn>
				<v-btn color="error" class="mr-1" @click="onDelete(row)">删除</v-btn>
			</template>
		</md-advanced-table>
		<category-type-dialog ref="dialog" @success="getTableData"/>
	</page-router-view>
</template>

<script>
import MdTableMixins from '@/common/mixins/MdTableMixins';
import CategoryApi from '@/common/api/CategoryApi';
import PageRouterView from '@/components/widget/PageRouterView';
import MdAdvancedTable from '@/components/widget/MdAdvancedTable';
import CategoryTypeDialog from '@/views/admin/category/modules/CategoryTypeDialog';

export default {
	components: {CategoryTypeDialog, MdAdvancedTable, PageRouterView},
	mixins: [MdTableMixins],
	data() {
		return {
			tableAttrs: this.$utils.tableAttrs({
				toolbarConfig: {},
				columns: [
					{field: '#', type: 'seq', width: 40, align: 'center'},
					{field: 'icon', title: '图标', align: 'center', slots: {default: 'icon'}, width: 70},
					{field: 'name', title: '名称', align: 'center'},
					{field: 'color', title: '字体颜色', align: 'center', slots: {default: 'color'}},
					{field: 'backgroundColor', title: '背景颜色', align: 'center', slots: {default: 'backgroundColor'}},
					{field: 'sortId', title: '排序', align: 'center', width: 80},
					{field: 'action', title: '操作', align: 'center', width: 200, slots: {default: 'action'}}
				]
			}),
			loadFunc() {
				return CategoryApi.typeApi.list(this.query)
			}
		}
	},
	computed: {},
	created() {
	},
	methods: {
		onDelete(row) {
			this.$utils.onConfirm(`是否删除"${row.name}?`).then(() => {
				CategoryApi.typeApi.delete(row.id).then(res => {
					this.$utils.responseHandler(res, true, true).then(this.onSearch);
				})
			})
		}
	},
	filters: {},
	watch: {}
}
</script>

<style scoped lang="scss">

</style>